<template>

  <el-card>
    <div class="head">
      <div class="head-search">
        <el-row type="flex">
          <el-input
            v-model="query.username"
            placeholder="根据用户用搜索"
            size="small"
          />
          <el-button class="clear" size="small" @click="clear">清空</el-button>
          <el-button type="primary" size="small" @click="search">搜索</el-button>

        </el-row></div>

      <div>
        <el-button v-allow="'base-users-add'" type="success" icon="el-icon-edit" @click="addHandle">新增用户</el-button>
      </div>
    </div>
    <el-alert
      :title="`共${counts}条记录`"
      type="info"
      show-icon
    />

    <!-- 用户信息 -->
    <el-table
      :data="formData"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="序号"
        width="180"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
      />
      <el-table-column
        prop="phone"
        label="联系电话"
        width="190"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="190"
      />
      <el-table-column
        prop="permission_group_title"
        label="权限组名称"
        width="300"
      />
      <el-table-column
        prop="role"
        label="角色"
        width="190"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="{row}">
          <el-button v-allow="'base-users-edit'" type="primary" plain icon="el-icon-edit" circle @click="editUser(row.id)" />
          <el-button v-if="row.id!==2" v-allow="'base-users-delete'" type="danger" plain icon="el-icon-delete" circle @click="delUser(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page.sync="query.page"
        :page-sizes="[2,3,4]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增用户  -->
    <!-- 弹框 -->
    <el-dialog :title="formList.id ? '编辑用户' :'创建用户'" :visible.sync="showDialog" @close="close">
      <!-- 表单 -->
      <el-form ref="formRef" label-width="120px" :model="formList" :rules="formRules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formList.username" style="width:50%" clearable />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formList.email" style="width:50%" clearable />
        </el-form-item>
        <el-form-item v-if="!formList.id" label="密码" prop="password">
          <el-input v-model="formList.password" show-password style="width:50%" clearable />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="formList.role" style="width:50%" clearable />
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_title">
          <el-select v-model="formList.permission_group_id" style="width:50%">
            <el-option
              v-for="item in permissionList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="formList.mobile" style="width:50%" clearable />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input style="width:50%" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="showDialog=false">取消</el-button>
            <el-button type="primary" size="small" @click="btnOk">确定</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </el-card>

</template>

<script>
import { userList, addUser, delUser, usersList, editUser } from '@/api/user'
import { permissionsSimpleList } from '@/api/permissions'
export default {
  components: {
  },
  data() {
    return {
      permissionList: [], // 权限组列表
      formData: [], // 用户列表
      query: {
        page: 0, // 当前页数
        pagesize: 2, // 页尺寸
        username: '' // 关键字
      },
      counts: 0, // 总记录数
      showDialog: false,
      // 表单数据对象
      formList: {},
      // 表单验证规则
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, {
          min: 2, max: 8, message: '用户名为2-8'
        }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '密码 不能为空', trigger: 'blur' }, {
          min: 2, max: 8, message: '密码为2-10'
        }],
        permission_group_id: [{ required: true, message: '权限组不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    close() {
      this.$refs.formRef.clearValidate()
      this.formList = {}
    },
    // 获取用户列表
    async initData() {
      const { counts, list } = await userList(this.query)
      this.formData = list
      this.counts = counts
    },
    // 每页数量切换事件
    handleSizeChange(val) {
      this.query.pagesize = val
      this.initData()
    },
    // 页码切换事件
    handleCurrentChange(val) {
      this.query.page = val
      this.initData()
    },
    async addHandle() {
      const res = await permissionsSimpleList()
      this.permissionList = res
      this.showDialog = true
    },
    // 发送请求
    async btnOk() {
      // 校验
      await this.$refs.formRef.validate()
      // 发送请求
      if (this.formList.id) {
        await editUser(this.formList)
      } else {
        await addUser(this.formList)
      }
      this.$message.success('添加成功')
      this.showDialog = false
      this.initData()
    },
    // 删除
    async delUser(id) {
      await this.$confirm('确认删除吗')
      await delUser(id)
      if (this.query.page !== 1 && this.formData.length === 1) {
        this.query.page--
      }
      this.initData()
      this.$message.success('删除角色成功')
    },
    // 编辑功能
    async editUser(id) {
      this.showDialog = true
      const res1 = await permissionsSimpleList()
      // console.log(res1)
      this.permissionList = res1
      // const res = await editUser(id)
      const res = await usersList(id)
      // console.log(res)
      this.formList = res
    },
    // 搜索
    async search() {
      // 从第一页开始搜索
      this.query.page = 1
      await this.initData()
    },
    // 清空
    async clear() {
      this.query.username = ''
      await this.initData()
    }
  }

}
</script>

<style >
  .head {
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
    .head-search{
    display: flex;
    /* justify-content: space-between; */

    }
    .clear {
      margin-left: 10px
    }
    .block {
      display: flex;
      flex-direction: row-reverse
    }
</style>
